<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<script src="/ui/js/jquery-2.1.3.min.js"></script>
</head>
<body>


<h2>利用JS无限添加一个相同部分</h2>
        <h5>第一种写法</h5>
        <asp:HiddenField ID="hfCount" runat="server" Value="-1" />
        <div id="divOne" runat="server">
   
        </div>
        <span class="addto"><a href="javascript:void(0);" onclick="AddInfo();">添加</a></span>
        <br />
        <hr />
	 
	 
	 
<script type="text/javascript">
            $(function () {
                var count = $("#hfCount").val();
                if (count <= 0) {
                    AddInfo();
                }
            })

            function AddInfo() {
              ①
                //根据数量来增加   hfCount的值   
                var Count = $("#hfCount").val();  //先取值
                var PageIndex = 0;
                //如果没有就自己加，有就根据个数来定
                if (Count > -1) {
                    var Indexs = $("#hfIndex").val().split(',');  //有多少个dl
                    Count = ++Indexs[Count - 1];  //第几个  取最大值 +1就可以
                    PageIndex = Indexs.length - 1;  //个数

                } else {
                    Count++;
                    PageIndex = Count;
                }
                  
             //第二种赋值，用这种下面的也要变   

            ②   字符串生成dl里面的Count改成PageIndex
             var OneCount = $("#OneCount").val(); //取个数
               var pageIndex = 0;
               if (OneCount > 0) {
                   var OneIndexs = $("#OneIndex").val();  //0,1,2,3,4
                   var Indexs = OneIndexs.split(',');    //0  1   2   3   4   ""
                   pageIndex = ++Indexs[Indexs.length - 2];  //取最大值每次+1就是下一个数字
               }




                var strHtml = "\r\n";
                strHtml += "<dl class='form_main' id=\"Form" + Count + "\">\r\n";
                //这里绑定表的主键  好做修改
                strHtml += "<input type=\"hidden\" name=\"hfID" + Count + "\" value=\"0\"/>\r\n";

                strHtml += "<dd>\r\n";
                strHtml += "<u>测试数据一：</u>\r\n";
                strHtml += "<input type='text' id='One" + Count + "' name='One" + Count + "' />\r\n";
                strHtml += "</dd>\r\n";

                strHtml += "<dd>\r\n";
                strHtml += "<u>测试数据二：</u>\r\n";
                strHtml += "<input type='text' id=\"Two" + Count + "\" name='" + Count + "' />\r\n";
                strHtml += "</dd>\r\n";

                if (Count > 0) {
                    strHtml += "<dt class=\"delete\"><a href=\"javascript:void(0);\" onclick=\"delControl('Form" + Count + "')\" >删除</a></dt>\r\n";
                }
                strHtml += "<dt></dt>\r\n";
                strHtml += "</dl>";
                  //字符串拼接好
             ①

                $("#divOne").append(strHtml);
                $("#hfCount").val(++PageIndex);
                var dd = $("#hfIndex").val();
                dd += Count + ",";
                $("#hfIndex").val(dd);

             ②

               $("#OneCount").val(parseInt(OneCount) + 1);   //数量加一
               var OneIndex = $("#OneIndex").val();            //先取值
               $("#OneIndex").val(OneIndex + pageIndex + ",");    //在原来的值上添加新的值

            }

             //删除
             ①

            function delControl(id) {
                $("dl").remove("#" + id);
                //我们让下面的ID删除，数量减一就可以了
                var count = $("#hfCount").val(); //取值
                $("#hfCount").val(--count);    //计算后赋值
                var index = $("#hfIndex").val();  //0,1,2,3              
                index = index.replace(id.replace("Form", "") + ",", ""); //删除第几个就把 x， 删除
                $("#hfIndex").val(index);
            }
         ②

              function delControl(id) {
                $("dl").remove("#" + id);
               //重新赋值
               var OneCount = $("#OneCount").val();
            　　　　　　　　 $("#OneCount").val(--OneCount);  //个数重新赋值
            　　　　　　　　 var dd = id.replace("Form", "");  //得到数字
            　　　　　　　　 var Index = $("#OneIndex").val();   //取值
            　　　　　　　　 Index = Index.replace(dd + ",", "");  //替换（也就是删除数字）
            　　　　　　　　 $("#OneIndex").val(Index);
        　　　　　　　　}
</body>
</html>